import React,{Component} from "react";
import BrowserRouter from "react-router-dom/BrowserRouter";
import NavLink from "react-router-dom/NavLink";
import Route from "react-router/Route";
import './ShoppingCar.css'
import Pencil from "./Pencil";
import Eraser from "./Eraser";

class ShoppingCar extends Component{
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <BrowserRouter>
                <div className="container">
                    <div className="menu">
                        <ul>
                            <li>
                                <NavLink to={{pathname:"/sc/pencil",state:{id:'01010',name:'铅笔3'}}}>铅笔</NavLink>
                            </li>
                            <li>
                                <NavLink to={{pathname:"/sc/eraser",state:{name:'橡皮4'}}}>橡皮</NavLink>
                            </li>
                        </ul>
                    </div>
                    <div className="center">
                        <Route path="/sc/pencil" component={Pencil}></Route>
                        <Route path="/sc/eraser" component={Eraser}></Route>
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}

export default ShoppingCar;